<script>
// 引入 vue3 的响应式和生命周期方法
import { ref, onMounted } from 'vue'
// 引入自定义日期工具组件
import DateUtils from "./DateUtils.vue"
// 引入 Element Plus 的图标组件
import {
    User,
    Iphone,
    Location,
    Male,
    Female,
    Tickets
} from '@element-plus/icons-vue'

export default {
    name: "Home",
    components: {
        DateUtils,
        User,
        Iphone,
        Location,
        Male,
        Female,
        Tickets
    },
    setup() {
        // 用户信息对象
        const user = ref({})

        // 初始化方法，从 sessionStorage 获取当前用户信息
        const init = () => {
            user.value = JSON.parse(sessionStorage.getItem('CurUser'))
        }

        // 组件挂载后初始化用户信息
        onMounted(() => {
            init()
        })

        return {
            user
        }
    }
}
</script>

<template>
    <!-- 个人中心页面主体 -->
    <div style="text-align: center;background-color: #f1f1f3;height: 100%;padding: 0px;margin: 0px;">
        <!-- 欢迎语，显示当前用户姓名 -->
        <h1 style="font-size: 50px;">{{ '欢迎你！' + user.name }}</h1>
        <!-- 用户信息展示，使用 el-descriptions 组件 -->
        <el-descriptions title="个人中心" :column="2" size="40" border>
            <!-- 账号信息 -->
            <el-descriptions-item>
                <template #label>
                    <el-icon>
                        <User />
                    </el-icon>
                    账号
                </template>
                {{ user.no }}
            </el-descriptions-item>
            <!-- 电话信息 -->
            <el-descriptions-item>
                <template #label>
                    <el-icon>
                        <Iphone />
                    </el-icon>
                    电话
                </template>
                {{ user.phone }}
            </el-descriptions-item>
            <!-- 性别信息 -->
            <el-descriptions-item>
                <template #label>
                    <el-icon>
                        <Location />
                    </el-icon>
                    性别
                </template>
                <el-tag :type="user.sex === '1' ? 'primary' : 'danger'" disable-transitions>
                    <el-icon>
                        <Male v-if="user.sex == 1" />
                        <Female v-else />
                    </el-icon>
                    {{ user.sex == 1 ? "男" : "女" }}
                </el-tag>
            </el-descriptions-item>
            <!-- 角色信息 -->
            <el-descriptions-item>
                <template #label>
                    <el-icon>
                        <Tickets />
                    </el-icon>
                    角色
                </template>
                <el-tag type="success" disable-transitions>
                    {{ user.roleId == 0 ? "超级管理员" : (user.roleId == 1 ? "管理员" : "用户") }}
                </el-tag>
            </el-descriptions-item>
        </el-descriptions>

        <!-- 日期时间组件 -->
        <DateUtils></DateUtils>
    </div>
</template>



<style scoped>
.el-descriptions {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
</style>
